import React from 'react';
import { timeData } from 'js/core/timeData';
import { Picker, Icon } from 'antd-mobile';
import echarts from 'js/lib/echarts';
import moment from 'moment';
import api from 'js/api/index';
import Flow from './flow';
import { i18n } from 'js/core/i18n';
import './zoneFlow.scss';


class Main extends React.Component {
  constructor() {
    super()
    this.proviceListObject = {};
    this.cityListObject = {};
    this.state = {
      proviceList: [],
      proviceId: null,
      proviceName: null,
      cityList: [],
      cityId: null,
      cityName: null,
    }
  }
  proviceList = () => {
    api('/BD/getProvice').then(data => {
      let proviceList = data.result.map(item => {
        let d = {}
        d.value = item.AreaID;
        d.label = item.Area;
        this.proviceListObject[item.AreaID] = d;
        return d
      })
      this.setState({ proviceList: proviceList, proviceId: data.result[0].AreaID, proviceName: data.result[0].Area }, () => {
        this.geCity();
      })
    });
  }
  geCity = () => {
    api('/BD/geCity', { areaid: this.state.proviceId }).then(data => {
      let cityList = data.result.map(item => {
        let d = {}
        d.value = item.AreaID;
        d.label = item.Area;
        this.cityListObject[item.AreaID] = d;
        return d
      })
      this.setState({ cityList: cityList })
    });
  }
  componentDidMount() {
    this.proviceList()
  }
  onChange = (value) => {
    this.cityListObject = {};
    this.setState({ proviceId: value[0], proviceName: this.proviceListObject[value[0]].label, cityList: [], cityId: null, cityName: null }, () => {
      this.geCity();
    })
  }
  cityOnChange = (value) => {
    this.setState({ cityId: value[0], cityName: this.cityListObject[value[0]].label })
  }
  render() {
    let { proviceList, proviceId, proviceName, cityId, cityName, cityList } = this.state;
    return <div id="zoneFlow">
      <Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")} data={proviceList} cols={1} value={[proviceId]} onChange={this.onChange}>
        <div className="flex-vcenter selectProvice">
          <div className="zone_icon"></div>
          <div className="name">{i18n.get('选择地区')}</div>
          <div className="flex-g-1 selectContent"  >
            {proviceName}
          </div>
          <div className="flex-col-1"> <Icon type="down" /></div>
        </div>
      </Picker>
      <Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")} data={cityList} cols={1} value={[cityId]} onChange={this.cityOnChange}>
        <div className="flex-vcenter selectProvice mb20" >
          <div className="flex-g-1 selectContent"  >
            {cityName}
          </div>
          <div className="flex-col-1"> <Icon type="down" /></div>
        </div>
      </Picker>
      {proviceId && <Flow type={cityId ? 4 : 3} id={cityId || proviceId} />}
    </div>
  }
}


export default Main;